<template>
  <Page name="设置">
    <template>
      <div class="setting">
        <h4>登录设置</h4>
        <ul>
          <li @click="goToPhone">
              <span>手机号码</span>
              <div class="ctrl">
                <span v-if="data.phone!=''">{{data.phone_area_code}} {{data.phone }}</span>
                <span v-else>您还没有绑定手机号码，点击绑定</span>
                <i class="arrow-right"></i>
              </div>
          </li>
          <li>
            <nuxt-link :to="{name:'setting-edit-password'}" >
              <span>登录密码</span>
              <div class="ctrl">
                <i class="arrow-right"></i>
              </div>
            </nuxt-link>
          </li>
        </ul>
        <h4>支付设置</h4>
        <ul>
          <li>
            <nuxt-link :to="{name:'setting-payment-password'}" >
              <span>支付密码</span>
              <div class="ctrl">
                <span>{{payText}}</span>
                <i class="arrow-right"></i>
              </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link :to="{name:'setting-bank'}" >
              <span>银行卡</span>
              <div class="ctrl">
                <i class="arrow-right"></i>
              </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link :to="{name:'setting-pay-sort'}" >
              <span>扣款顺序</span>
              <div class="ctrl">
                <i class="arrow-right"></i>
              </div>
            </nuxt-link>
          </li>
        </ul>
        <button @click="getPop">退出登录</button>

        <ui-popup :status="popup.status" @close="popupClose">
          <div class="popup-common exit-pop">
              <div class="exit-content">
                  <p> {{ popInfo.title }} </p>
              </div>
              <div class="footer">
                  <a href="javascript:;" @click="popupClose">取消</a>
                  <a href="javascript:;" @click="confirm">确定</a>
              </div>
          </div>
        </ui-popup>
      </div>
    </template>
  </Page>
</template>

<script>


import Page from '~/components/page';
import popup from "~/components/common/popup";
export default {
  components: {
    Page,
    [popup.name]: popup,
  },
  data() {
    return {
      popType: '',
      popInfo: {
          title: "",
          content: ""
      },

      popup: {
          status: false
      },
      data:{},
      payText:""
    }
  },
  methods: {
    getPop () {
      this.popInfo.title = "确定要退出登录吗？";
      this.popup.status = true;
    },
    popupClose () {
      this.popup.status = false;
    },
    confirm (id) {
      this.popup.status = false;
      this.signOut();
    },
    async signOut(){
        let { data:rs } = await this.$axios.post('?ct=api&ac=logout',{
          uid:localStorage.getItem("uid"),
          token:localStorage.getItem("token")
        })
        if(rs.code == 0){
          this.$toast("退出登录成功");
          this.$store.dispatch('LOGOUT');
          //this.$router.push({name:'login',query:{type:2}});
        }else{
          this.$toast(rs.msg)
        }
        this.$router.push({name:'login',query:{type:2}});
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        localStorage.removeItem('uid');
    },
    async getDate(){
        let { data:rs } = await this.$axios.post('?ct=api&ac=get_user')
        if(rs.code == 0){
          this.data = rs.data;
          var len = this.data.phone.length;
          if(this.data.phone=='') return;
          this.data.phone = '******' + rs.data.phone.substring(len-2,len);
        }else{
          this.$toast(rs.msg)
        }
    },
    async getPwdDate(){
      let { data: rs } = await this.$axios.post('?ct=api&ac=has_pay_pwd');
      if(rs.code != 0){
          this.payText = '您还没有设置支付密码，点击设置';
      }
    },
    goToPhone(){
      if(this.data.phone != ''){
        this.$router.push({name:'setting-phone'})
      }else{
        this.$router.push({name:'setting-edit-phone',query:{type:'set'}})
      }
    }
  },
  mounted() {
    (async ()=>{
      await this.getDate();
      await this.getPwdDate();
    })();
  },
}
</script>

<style lang="less" scoped>
  .setting{
    h4{
      line-height: 1;
      color:#999;
      padding:20px 30px;

    }
    ul{
      background: #fff;
      padding-left:30px;
      li,a{
        display: flex;
        width:100%;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 100px;
        border-bottom:1px solid #ededf0;
        font-size: 32px;
        a{
          border-bottom:0;
        }
        div{
          text-align: right;
          flex: 1;
          font-size: 0.346667rem;
          color: #999;
          padding-right:30px;

          i{
            background: url(~assets/img/jiantou_right.png) no-repeat left center;
            width: 0.133333rem;
            height: 0.24rem;
            display: inline-block;
            background-size: 100%;
          }
        }
      }
      li:last-child{
        border-bottom:0;
      }
    }
    button{
      outline: none;
      width:100%;
      line-height: 106px;
      text-align: center;
      color:#ed5725;
      font-size:34px;
      background: #fff;
      border:none;
      margin-top:50px;
    }
  }
  .popup-common {
      position: absolute;
      left: 11%;
      background: #fff;
      z-index: 999;
      border-radius: 10px;
  }

  .exit-pop {
      top: 40%;
      width: 600px;
      height: 280px;
      .exit-content {
          margin-top: 60px;
          text-align: center;
          p {
              margin-top: 40px;
              font-size: 36px;
              color: #282828;
          }
      }
      .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          a {
              display: inline-block;
              width: 50%;
              padding: 30px 0;
              text-align: center;
              font-size: 36px;
              border-top: 1px solid #e2e2e2;
              color: #2086f9;
              &:first-child {

                  border-right: 1px solid #e2e2e2;
              }
          }
      }
  }

</style>
